import {Form, Input, Select, DatePicker, Modal} from 'antd';
import React from 'react';
import moment from 'moment';
const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const { TextArea } = Input;

const UpdateForm = Form.create(
    { mapPropsToFields(props) {
        console.log(props);
        return {
            itemCode: Form.createFormField({
                value: props.initValues.itemCode,
            }),
            itemDescription: Form.createFormField({
                value: props.initValues.itemDescription,
            }),
            itemUom: Form.createFormField({
                value: props.initValues.itemUom,
            }),
            activePeriod:{
                value:[
                    Form.createFormField({
                    value: moment(props.initValues.startActiveDate).format(dateFormat),
                }), Form.createFormField({
                    value: moment(props.initValues.endActiveDate).format(dateFormat),
                })]
            },
            enabledFlag: Form.createFormField({
                value: props.initValues.enabledFlag===1?"是":"否",
            }),
            objectVersionNumber: Form.createFormField({
                value: props.initValues.objectVersionNumber,
            }),

        };
    } })(

    class Search extends React.Component {
        state = {
            startDate: null,
            endDate: null,
        };
        onRangeChange = (date,dateString) => {
            this.setState({
                startDate: dateString[0],
                endDate: dateString[1],
            });
        };
        getStartDate(){
            return this.state.startDate;
        }
        getEndDate(){
            return this.state.endDate;
        }
        render() {
            const { visible, onCancel, onCreate } = this.props;
            const { getFieldDecorator } = this.props.form;
            return (
                <Modal
                    visible={visible}
                    title="修改"
                    okText="Update"
                    onCancel={onCancel}
                    onOk={onCreate}
                >
                    <Form layout="inline">
                        <Form.Item label="物料编码">
                            {getFieldDecorator('itemCode', {
                            })(<input style={{width:250}}
                                      placeholder="物料编码" id="form_in_modal_itemDescription"
                                      className="ant-input"
                                      disabled/>)}
                        </Form.Item>

                        <Form.Item label="物料描述">
                            {getFieldDecorator('itemDescription', {

                                required: true,
                            })(<TextArea
                                style={{width:250}}
                                placeholder="物料描述"
                                autosize={{ minRows: 2, maxRows: 6 }}
                            />)}
                        </Form.Item>
                        <Form.Item label="物料单位">
                            {getFieldDecorator('itemUom', {
                                required: true,
                            })(<Select style={{width:90}}>
                                <Option value="米">米</Option>
                                <Option value="平方米">平方米</Option>
                                <Option value="立方米">立方米</Option>
                                <Option value="千克">千克</Option>
                                <Option value="个">个</Option>
                                <Option value="其他">其他</Option>
                            </Select>)}
                        </Form.Item>
                        <Form.Item label="生效周期">
                            {getFieldDecorator('activePeriod', {
                                initialValue:[moment("2019-01-01"),moment("2019-12-01")],
                                required: true,
                            })(<RangePicker
                                onChange={this.onRangeChange}
                                format={dateFormat} style={{}}/>)}
                        </Form.Item>
                        <Form.Item label="是否启用">
                            {getFieldDecorator('enabledFlag', {
                                required: true,
                            })(<Select style={{width:90}}>
                                <Option value='1'>是</Option>
                                <Option value='0'>否</Option>
                            </Select>)}
                        </Form.Item>
                        <Form.Item label="版本号">
                            {getFieldDecorator('objectVersionNumber', {
                            })(<input style={{width:250,display:""}}
                                      placeholder="版本号" id="form_in_modal_itemDescription"
                                      className="ant-input"
                                      disabled/>)}
                        </Form.Item>
                    </Form>
                </Modal>
            );
        }
    }
);

export default UpdateForm;
